<template>
	<view class="tests">
		<view class="padding-lr bg-white">
			<view class="text-bold text-xl padding-tb-sm flex"><text class="text-cut" v-text="title"></text></view>
			<view class="padding-bottom text-right">{{ test_num }}人已测</view>
			<view class="flex p-xs thum-mark">
				<view class="radius">
					<image class="radius" :src="image" mode="aspectFill"></image>
				</view>
				<view class="text-center text-white text-xl mark-pages">
					<text>{{ subjectIndex + 1 }}/{{ question.length }}</text>
				</view>
			</view>
		</view>

		<swiper :current="subjectIndex" class="swiper-box" @change="SwiperChange">
			<swiper-item v-for="(item, index) in question" :key="index">
				<view class="bg-white" v-if="index - subjectIndex >= -1 && index - subjectIndex <= 1">
					<scroll-view scroll-y="true" class="scroll-Y" :style="{ height: scrollHeight + 'px' }">
						<view class="cu-bar">
							<view class="action text-black">
								<text class="cuIcon-title text-mauve"></text>
								{{ item.title }}
							</view>
						</view>
						<view class="padding-lr mark-image" v-if="item.image">
							<image :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="solid-top margin-top-sm">
							<radio-group class="block">
								<view class="cu-question padding-sm flex solid-bottom" v-for="(it, ik) in item.wen_ti"
									:data-option="it.option" :key="ik" @click="goAnswer">
									<view class="">
										<radio color="#9c26b0" class="mauve" :value="it.option"
											:class="item.userAnswer.indexOf(it.option) > -1 ? 'checked' : ''"
											:checked="item.userAnswer.indexOf(it.option) > -1 ? true : false"></radio>
									</view>
									<view class="padding-left-xs title text-black">{{ it.option }}.{{ it.intro }}</view>
								</view>
							</radio-group>
						</view>
					</scroll-view>
				</view>
			</swiper-item>
		</swiper>

		<view class="cu-tabbar-height"></view>
		<view class="cu-bar tabbar foot bg-white">
			<view class="action text-mauve" @click="MoveSubject(-1)">
				<view class="cuIcon-back"></view>
				上一题
			</view>
			<view class="action text-mauve" @click="MoveSubject(1)">
				<view class="cuIcon-right"></view>
				下一题
			</view>
			<view class="btn-group"><button class="cu-btn bg-mauve round shadow-blur padding-lr-xl" @click="goTest">提
					交</button></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default () {
					return '';
				}
			},
			image: {
				type: String,
				default () {
					return '';
				}
			},
			test_num: {
				type: Number,
				default () {
					return 0;
				}
			},
			test_id: {
				type: [Number, String],
				default () {
					return 0;
				}
			},
			question: {
				type: Array,
				default () {
					return [];
				}
			}
		},
		data() {
			return {
				currentType: 0, //当前题型
				subjectIndex: 0, //跳转索引
				autoRadioNext: true, //判断题、单项题，自动移下一题
				scrollHeight: 300
			};
		},
		mounted() {
			let info = uni
				.createSelectorQuery()
				.in(this)
				.select('.swiper-box')
				.boundingClientRect();
			info.exec(res => {
				this.scrollHeight = res[0].height;
				console.log(this.scrollHeight);
			});
		},
		methods: {
			SwiperChange: function(e) {
				//滑动事件
				let index = e.target.current;
				if (index != undefined) {
					this.subjectIndex = index;
				}
			},
			goAnswer: function(e) {
				let values = e.currentTarget.dataset.option;
				//单选选中			
				this.question[this.subjectIndex].userAnswer = values;
				if (this.autoRadioNext && this.subjectIndex < this.question.length - 1) {
					//跳转下一题
					this.subjectIndex += 1;
				}
			},

			MoveSubject: function(e) {
				//上一题、下一题
				if (e === -1 && this.subjectIndex != 0) {
					this.subjectIndex -= 1;
				}
				if (e === 1 && this.subjectIndex < this.question.length - 1) {
					this.subjectIndex += 1;
				}
			},
			goTest() {
				console.log(this.question);
				let index = -1;
				let result = [];
				for (let i = 0, len = this.question.length; i < len; i++) {
					if (!this.question[i].userAnswer) {
						index = i;
						break;
					}
					result.push({
						main_id: this.question[i].main_id,
						question_id: this.question[i].question_id,
						userAnswer: this.question[i].userAnswer
					});
				}
				if (index != -1) {
					this.$common.errorToShow(`第${index + 1}未作答，请先作答！`);
					return;
				}
				this.$api
					.mark_result({
						test_id: this.test_id,
						result: JSON.stringify(result)
					})
					.then(res => {
						if (res.code) {
							this.$common.successToShow(res.msg, () => {
								uni.redirectTo({
									url: this.$ph.success + `?test_id=${this.test_id}`
								});
							});
						} else {
							this.$common.errorToShow(res.msg);
						}
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.tests {
		display: flex;
		flex-direction: column;
		height: calc(100vh - 100rpx);

		.swiper-box {
			flex: 1;
		}
	}

	.thum-mark {
		position: relative;

		image {
			height: 300rpx;
			width: 92vw;
		}

		.mark-pages {
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			background: #9c26b0;
			padding: 4rpx 20rpx;
			border-radius: 20rpx;
			font-size: 30rpx;
			box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
		}
	}

	.cu-question {
		font-size: 30rpx;
	}

	.mark-image {
		image {
			width: 100vw;
			height: 300rpx;
			border-radius: 5rpx;
		}
	}
</style>
